<template>
  <div class="ThreeDZFileArea">
    <h4>书影原文对照</h4>
    <el-row style="margin-top: -1%;display: flex; justify-content: space-between;">
      <el-col :span="8">
        <div v-if="localIsMongolianFont1" class="MengInput" style="
            writing-mode: vertical-lr;
            text-orientation: sideways-right;
            font-family: OyunQaganTig, sans-serif;
            background-color: #ecddd6;
            width: 192px;
            height: 180px;
            font-size: 18px;
            overflow-x: auto; /* or overflow-y: scroll; */
            border: 1px solid #DCDFE6;
            border-radius: 4px
            ">
            {{ LoacalSYtextarea1 }}
          </div>
        <el-input
        v-else
          type="textarea"
          :rows="9"
          placeholder="请上传少语原文文件1"
          v-model="LoacalSYtextarea1"
          style="font-size: 18px"
        ></el-input>
      </el-col>
      <el-col :span="8">
        <div v-if="localIsMongolianFont2" class="MengInput" style="
            writing-mode: vertical-lr;
            text-orientation: sideways-right;
            font-family: OyunQaganTig, sans-serif;
            background-color: #ecddd6;
            width: 192px;
            height: 180px;
            font-size: 18px;
            overflow-x: auto; /* or overflow-y: scroll; */
            border: 1px solid #DCDFE6;
            border-radius: 4px;
            margin-left: 8px;
            ">
            {{ LoacalSYtextarea2 }}
          </div>
        <el-input
        v-else
          type="textarea"
          :rows="9"
          placeholder="请上传少语原文文件2"
          v-model="LoacalSYtextarea2"
          style="margin-left: 8px;font-size: 18px"
        ></el-input>
      </el-col>
      <el-col :span="8">
        <el-input
          type="textarea"
          :rows="9"
          placeholder="请上传汉语对照文件"
          v-model="LoacalZtextarea"
          style="margin-left: 18px;font-size: 18px"
        ></el-input>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    SYtextarea1: String,
    SYtextarea2: String,
    DZtextarea: String,
    isMongolianFont1: Boolean,
    isMongolianFont2: Boolean

  },
  data () {
    return {
      LoacalSYtextarea1: '',
      LoacalSYtextarea2: '',
      LoacalZtextarea: '',
      localIsMongolianFont1: this.isMongolianFont1,
      localIsMongolianFont2: this.isMongolianFont2

    }
  },
  watch: {
    isMongolianFont1 (newValue) {
      this.localIsMongolianFont = newValue
      console.log(this.localIsMongolianFont)
    },
    isMongolianFont2 (newValue) {
      this.localIsMongolianFont = newValue
      console.log(this.localIsMongolianFont)
    },
    SYtextarea1 (newSYtextarea1) {
      this.LoacalSYtextarea1 = newSYtextarea1
    },
    SYtextarea2 (newSYtextarea2) {
      this.LoacalSYtextarea2 = newSYtextarea2
    },
    DZtextarea (newDZtextarea) {
      this.LoacalZtextarea = newDZtextarea
    }
  }
}
</script>

<style scoped lang="less">
.ThreeDZFileArea {
  display: block;
  height: 280px;
  width: 580px; /* 修正宽度的 typo */
}

/deep/.el-textarea__inner {
  background-color: #ecddd6;
  width: 192px;
  height: 180px;
}
</style>
